{% extends "main.tpl" %}
{% block stylesheets %}
	<!-- Additional styles -->
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/form.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/switches.css?v=1">  
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/table.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/modal.css?v=1">
    <!-- DataTables -->
	<link rel="stylesheet" href="{{ javascript_path }}libs/DataTables/jquery.dataTables.css?v=1">
{% endblock %}
{% block content_title %}Widgets{% endblock %}
{% block content %}

		<div class="with-padding">
			
            <h3>Installed</h3>
            <p> <a href="#" id="add_widget" class="button icon-star">Create new widget</a></p>
			<table class="table responsive-table">
				<thead>
					<tr>
						<th scope="col" width="15" class="align-center">ID</th>
						<th scope="col" width="15%" class="align-center">Title</th>
						<th scope="col" width="15%" class="align-center">Widget name</th>
						<th scope="col" class="align-center">Actions</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td colspan="5">
							{{ installed_widgets|length }} entries found
						</td>
					</tr>
				</tfoot>
				<tbody>
                	{% for widget in installed_widgets %}
					<tr>
						<td class="align-center">{{ widget.id }}</td>
						<td class="align-center">{{ widget.name }}</td>
						<td class="align-center">{{ widget.file_name }}</td>
						
						<td class="low-padding align-center">
							<span class="button-group compact">
                            
								<a href="{{ cms_uri }}/widgets/edit/{{ widget.id }}" class="button icon-gear">Config</a>                                
                                <a href="{{ cms_uri }}/widgets/delete/{{ widget.id }}" class="button icon-trash confirm">Remove</a>						
                               				
							</span>                        
                        
							                       
                        </td>
					</tr>
                    {% endfor %}                   
				</tbody>
			</table>            
                   
		</div>
        
        <div id="widget_form" style="display:none">
        <form  action="{{ cms_url('widgets/add') }}" method="post" >
        	<label class="label">Name:</label>
        	<input type="text" name="name" class="input full-width"/>
            <label class="label">Type:</label>
            <select name="type">
            	{% for widget in available_widgets %}
                <option value="{{widget}}">{{widget}}</option>
                {% endfor %}
            </select>
            
            <input type="hidden" name="{{ csrf_token }}" value="{{ csrf_hash }}" />            
        </form>
        </div>
{% endblock %}
{% block javascripts %}

	<!-- Template functions -->
	<script src="{{ javascript_path }}developr.input.js"></script>
	<script src="{{ javascript_path }}developr.navigable.js"></script>
	<script src="{{ javascript_path }}developr.notify.js"></script>
	<script src="{{ javascript_path }}developr.scroll.js"></script>
	<script src="{{ javascript_path }}developr.tooltip.js"></script>
	<script src="{{ javascript_path }}developr.table.js"></script>
	<script src="{{ javascript_path }}developr.tabs.js"></script>
	<script src="{{ javascript_path }}developr.confirm.js"></script>

	<script src="{{ javascript_path }}developr.modal.js"></script>

	<!-- Plugins -->
	<script src="{{ javascript_path }}libs/jquery.tablesorter.min.js"></script>
	<script src="{{ javascript_path }}libs/DataTables/jquery.dataTables.min.js"></script>

	<script>

		// Call template init (optional, but faster if called manually)
		$.template.init();

		
		// Create group
		$('#add_widget').click(function(e) {
            e.preventDefault();            
                    $.modal({
					    title: 'Add widget',
					    content: $('#widget_form').html(),
					    buttons: { 
					    	'Add' : function(modal){
				                   modal.getModalContentBlock().find('form').submit();				    		
					    	},
					    	'Cancel' : function(modal){ 
					    		modal.closeModal()
					    	} 
					    },
					    
					             
					});

        });
	

	</script>
{% endblock %}

</body>
</html>